<template>
	<view class="container">
		<!-- 搜索 -->
		<!-- 侧面导航条 -->
		<view class="side">
		  <uni-icons type="top" size="30" class="go" @click="goTop"></uni-icons>
		  <uni-icons type="plusempty" size="30" class="add" @click="gotoAdd"></uni-icons>
		</view>
		
		<view class="search">
			<uni-search-bar class="search-box" radius="100" placeholder="搜索" clearButton="auto" cancelButton="none"
				@confirm="search" bg-color="#f5f6f7" />
		</view>

		<!-- 筛选导航 -->
		<!-- 标签栏 -->
		<view class="list">
			<view :class="item.id === nowType && tapNum === 1 ? 'item1':'item2'" v-for="(item, index) in typeList"
				:key="index" @click="thingHandle(index)">
				{{item.name}}
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#EFEFEF" @maskClick="close">
				<view class="price_select"
					style="display: flex; justify-content: center; align-items: center; margin-top: 20rpx;flex-wrap: wrap;"
					v-if="tapNum == 1 && nowType === 3">
					<view style="width: 30%; margin: 0rpx  20rpx;">
						<input type="text" style=" background-color: #f5f6f7;" placeholder="最小(0)" @input="minPrice"
							:value="min">
					</view>
					<view >
						-----
					</view>
					<view style="width: 30%; margin-left: 20rpx;">
						<input type="text" style=" background-color: #f5f6f7;" placeholder="最大(10000)" @input="maxPrice"
							:value="max">
					</view>
					<view style="width: 100%; display: flex; justify-content: center; align-items: center;margin-top: 20rpx;">
						<button type="default"  @click="submitPrice" style="background-color: #ffeb37;" size="mini">提交</button>
						<button type="default" @click="resetPrice" style="background-color: #ffeb37;" size="mini">重置</button>
					</view>
				</view>
			</uni-popup>
		</view>

		

		<!-- 商品区域 -->
		<view class="loseContent">
			<view class="content" v-for="(item, index) in productList" :key="index" @click="gotoGoodsDetail(item)">
				<!-- 若图片存在 -->
				<view class="img" v-if="item.image!=''">
					<image :src="item.indexImg"></image>
				</view>
				<view class="list">
					<view class="title">
						{{item.name}}
					</view>
				</view>
				<view class="nowThing">价格：{{item.price}}</view>
				<view class="user" :style="{display: 'flex'}">
					<view class="imageUser">
						<image :src="item.userImg"></image>
					</view>
					<view class="userName">{{item.senderName}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList: [],
				total: 0,
				pageSize: 10,
				currPage: 1,
				typeList: [{
						name: '最新发布',
						id: 0
					},
					{
						name: '价格最低',
						id: 1
					},
					{
						name: '价格最高',
						id: 2
					},
					{
						name: '设置价格',
						id: 3
					}
				],
				nowType: -1,
				tapNum: 0,
				min: 0,
				max: 100000,
				name: ''
			};
		},

		onLoad() {
			this.getTypeList();
		},
		filters: {
			tofixed(num) {
				return Number(num).toFixed(2);
			}
		},
		methods: {
			close(){
				this.tapNum=0;
			},
			// 会到最顶
			goTop(e) {
			  if (uni.pageScrollTo) {
			    uni.pageScrollTo({
			      scrollTop: 0
			    })
			  } else {
			    uni.showModal({
			      title: '提示',
			      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			    })
			  }
			},
			//添加商品
			gotoAdd(){
				uni.navigateTo({
					url:'/subpkg_idleMarket/goods_add/goods_add'
				})
			},
			// 设置模式
			async thingHandle(e) {
				if(e==this.nowType){
					if (this.tapNum == 0) {
						this.nowType = e;
						this.tapNum = 1;
					} else {
						this.nowType = -1;
						this.tapNum = 0;
					}
				}else{
					this.nowType=e;
					this.tapNum = 1;
				}
				if(this.nowType==3){
					this.tapNum = 1;
					console.log(112312)
					this.$refs.popup.open('bottom')
					return ;
				}
				if (this.nowType != -1&&this.nowType!=3) {
					
						const {
							data: res
						} = await uni.$http.get('/bbm/goods/list', {
							name: this.name,
							max: this.max,
							min: this.min,
							statue:this.nowType
						},{
							emulateJSON: true
						});
						this.productList = res.page.list;
						this.currPage=2;
						this.total=res.page.totalCount;
				}else if(this.nowType==-1){
					this.getTypeList();
					this.currPage=2;
				}
			},
			//获取商品
			async getTypeList() {
				const {
					data: res
				} = await uni.$http.get('/bbm/goods/list',{emulateJSON: true});
				this.productList = res.page.list;
				this.total=res.page.totalCount;
				this.currPage=2;
				console.log(res);
			},
			//去详情页
			gotoGoodsDetail(goods) {
				console.log(goods);
				uni.navigateTo({
					url: '/subpkg_idleMarket/goods_detail/goods_detail?goods_id=' + goods.id
				})
			},
			//查找功能
			async search(e) {
				this.name = e.value;
				const {
					data: res
				} = await uni.$http.get('/bbm/goods/list', {
					name: this.name
				}, {
					emulateJSON: true
				});
				this.productList = [];
				this.productList = res.page.list;
				this.currPage=2;
				this.total=res.page.totalCount;
			},
			//设置最低价格
			minPrice(e) {
				this.min = parseInt(e.detail.value);
			},
			//设置最高价格
			maxPrice(e) {
				this.max = parseInt(e.detail.value);
			},
			//提交设置价格
			async submitPrice() {
				if (this.min > this.max) {
					uni.showToast({
						icon: 'none',
						title: '最小价格应大于最大价格',
						duration: 1500
					})
					return;
				} else if (this.min == NaN || this.max == NaN) {
					uni.showToast({
						icon: 'none',
						title: '请输入数字',
						duration: 1500
					})
					return;
				}
				const {
					data: res
				} = await uni.$http.get('/bbm/goods/list', {
					name: this.name,
					min: this.min,
					max: this.max
				}, {
					emulateJSON: true
				});
				this.productList = res.page.list;
				this.tapNum = 0;
				this.nowType = -1;
				this.currPage=2;
				this.total=res.page.totalCount;
				this.$refs.popup.close('bottom')
			},
			//重置价格
			resetPrice(){
				this.max=100000;
				this.min=0;
				this.submitPrice();
			},
			async  reachBottom(){
				if((this.currPage-1)*10>this.total){
					uni.showToast({
						title:"数据已全部加载"
					})
					return ;
				}
				if(this.nowType!=-1){
					const {data:res} = await uni.$http.get('/bbm/goods/list',
					{
						name: this.name,
						max: this.max,
						min: this.min,
						statue:this.nowType,
						page:this.currPage
					});
					this.productList=this.productList.concat(res.page.list);
					this.currPage+=1;
				}else{
					const {data:res} = await uni.$http.get('/bbm/goods/list',
					{
						name: this.name,
						max: this.max,
						min: this.min,
						page:this.currPage,
					});
					this.productList=this.productList.concat(res.page.list);
					this.currPage+=1;
				}
				this.$refs.popup.close('bottom')
			}
		},
		onReachBottom() {
			this.reachBottom();
		}
	}
</script>

<style lang="scss">
	// 价格选择
	.price_select {
		margin-top: 10rpx;
		margin-bottom: 10rpx;

		input {
			border-radius: 5px;
		}
	}

	/* 标签选择 */
	.list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.list .item2 {
		background-color: #e2e2e250;
		width: 30%;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
		line-height: 60rpx;
	}

	.list .item1 {
		background-color: #ffeb37;
		width: 30%;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		color: #252525;
		line-height: 60rpx;
	}

	// 测试
	.loseContent {
		width: 100%;
		height: 100%;
	}

	.loseContent .content {
		border-radius: 30rpx;
		float: left;
		background-color: #fff;
		width: 300rpx;
		// height: 400rpx;
		padding: 20rpx;
		margin-left: 25rpx;
		margin-top: 25rpx;
		margin-bottom: 35rpx;
	}

	.loseContent .content .img {
		margin-left: 10rpx;
	}

	.loseContent .content .img image {
		height: 280rpx;
		width: 280rpx;
		border-radius: 30rpx;
	}

	.loseContent .content .title {
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-weight: bold;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.loseContent .content .button {
		background-color: #ffd23c;
		border-radius: 30rpx;
		padding: 12rpx;
		font-size: 24rpx;
		text-align: center;
		width: 100rpx;
		margin-top: 5rpx;
	}

	.loseContent .content .nowThing {
		color: gray;
		margin-left: 15rpx;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.loseContent .content .imageUser image {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-left: 10rpx;
		border: 5rpx gray solid;
	}

	.loseContent .content .userName {
		margin-top: 30rpx;
		margin-left: 15rpx;
	}

	.loseContent .content .icon image {
		width: 70rpx;
		height: 70rpx;
		margin-top: -5rpx;
		margin-left: 70rpx;
	}

	// 分类
	.cate {
		background-color: white;
		display: flex;
		margin-top: 10rpx;
		font-family: '微软雅黑';
		font-size: 16px;
		white-space: nowrap;
		margin-bottom: 20rpx;

		.cate-item {

			margin-left: 15rpx;
			margin-right: 15rpx;
			color: #999;
			padding-bottom: 10rpx;

		}

		.active {
			color: #f43838;
			font-weight: bold;
		}
	}


	// 商品
	.product-containner {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		.product-item {
			margin-top: 30rpx;
			margin-left: 2.5%;
			margin-right: 2.5%;
			width: 45%;
			display: flex;
			flex-direction: column;
			background-color: white;
			box-shadow: 0px 0px 5px 1px #999;
			border-radius: 2%;
			padding-bottom: 6rpx;

			.image-box {
				width: 100%;
				height: 0;
				padding-top: 100%;
				position: relative;

				.product-index-image {
					border-radius: 2%;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.product-title {
				padding-left: 3px;
				margin-top: 5px;
				font-size: 15px;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.product-price {
				padding-left: 3px;
				margin-top: 5px;
				font-size: 13px;
				color: #c00000;
			}

			.issue-user {
				padding-left: 3px;
				margin-top: 5px;
				display: flex;
				align-items: center;

				.issue-image {

					height: 20px;
					width: 20px;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}
	
	.side {
	  background-color: #fff;
	  width: 100rpx;
	  height: 200rpx;
	  border-radius: 50rpx;
	  position: fixed;
	  top: 850rpx;
	  left: 630rpx;
	  display: flex;
	  flex-wrap: wrap;
	  justify-items: center;
	  align-items: center;
	}
	
	.side .go {
	  margin-left: 20rpx;
	  margin-top: 10rpx;
	}
	
	.side .go image {
	  width: 80rpx;
	  height: 80rpx;
	}
	
	.side .add {
	  font-size: 50rpx;
	  background-color: #ffd23c;
	  width: 90rpx;
	  border-radius: 50%;
	  height: 90rpx;
	  line-height: 90rpx;
	  text-align: center;
	  margin: 0 auto;
	  margin-top: 0rpx;
	  font-weight: bold;
	  color: #fff;
	}
</style>